<div class="flex flex-col w-full" x-data="tabs">
    <div x-init="tabs = '{{ labels }}'.split('|'); tabs_id = '{{ tabs_id }}'"></div>
    <div class="flex border-b bg-gray-800 border-b-gray-700 space-x-1 w-full text-sm px-2 py-0 dark:bg-gray-800 text-gray-400" @tab-change.window="onTabChange">
        <template x-for="(tab, index) in tabs">
            <div
                class="pt-2.5 pb-2 px-3 cursor-pointer border-b-2 border-transparent border-gray-500"
                :class="{ 'text-gray-200 border-b-teal-500 shadow-[0px_-2px_3px_0px_rgba(0,0,0,0.1)]': index === active }"
                @click="updateTab(index)"
                x-text="`${tab}`"
            ></div>
        </template>
    </div>

    {{ slot }}
</div>